<template>
	<div class="chat-box">
		<div class="msg-box">
			<ChatItem />
		</div>
		<div class="func-box">
			<div style="padding: 20px;">
				<a-space size="small">
					<a-button size="small" type="primary">Primary</a-button>
					<a-button size="small">Default</a-button>
					<a-button size="small" type="dashed">Dashed</a-button>
					<a-button size="small" type="link">Link</a-button>
				</a-space>
			</div>
			<div style="padding: 0 20px; display: flex; align-items: flex-end;">
				<div style="flex: 1; margin-right: 20px;">
					<a-textarea placeholder="请输入内容, 按Enter换行, 按Enter+Ctrl直接发送" :maxlength="255" allowClear showCount
						:autoSize="{ minRows: 8, maxRows: 8 }" :bordered="false" />
				</div>
				<a-space size="small">
					<a-button type="primary">
						<template #icon>
							<send-outlined />
						</template>
						发送
					</a-button>
				</a-space>
			</div>
		</div>
	</div>
</template>
<script setup>
import ChatItem from '@/components/ChatItem.vue';
</script>
<style scoped>
.chat-box {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.chat-box .msg-box {
	padding: 0 20px;
	flex: 1;
	overflow-y: auto;
	background-color: #EFEFEF;
	border-bottom: 1px solid rgb(221, 221, 221);
}

.chat-box .func-box {
	height: 38.2%;
}
</style>